import baseData from './data.js'
import Storage from '../utils/storage.js'
import ClassOperate from '../utils/class.operate.js'
class Index {

    // '<span class="ball ball-r gray" id="r_$k">$v</span>'
    // '<span class="ball ball-b gray" id="b_$k">$v</span>'

    remarkValues = '' // 初始化的时候不能初始化它，所以放在外面
    rateMin = 33 // 随机结果最小频率
    rateMax = 88 // 随机结果最大频率

    constructor(utils = null) {

        this.utils = utils
        this.storage = Storage.of()
        this.ClassOperate = ClassOperate.of()
        this.baseData = baseData

    }

    // 初始化
    init() {
        let doc = document // 缓存 document
        this.doc = doc // 全局成员也放一个

        this.killBluesEl = doc.getElementById('killBlues') // 杀蓝输入框
        this.killRedsEl = doc.getElementById('killReds') // 杀红输入框
        this.generateKillRemainBtn = doc.getElementById('generateKillRemain') // 杀球生成剩余球按钮
        this.remainRedBox = doc.getElementById('remainRed') // 剩余红球盒子
        this.remainBlueBox = doc.getElementById('remainBlue') // 剩余蓝球盒子
        this.generateBtn = doc.getElementById('generate') // 生成按钮
        this.restoreBtn = doc.getElementById('restore') // 重置按钮
        this.resultBox = doc.getElementById('result') // 生成的结果盒子
        this.choseBluesEl = doc.getElementById('choseBlues') // 手动选蓝球输入框
        this.choseRedsEl = doc.getElementById('choseReds') // 手动选红球输入框
        this.generateChoseRemainBtn = doc.getElementById('generateChoseRemain') // 手动选球生成剩余球按钮
        this.redNumsEl = doc.getElementById('redNums') // 生成结果红球数量输入框
        this.blueNumsEl = doc.getElementById('blueNums') // 生成结果蓝球数量输入框
        this.gallopRedsEl = doc.getElementById('gallopReds') // 红胆输入框
        this.gallopBluesEl = doc.getElementById('gallopBlues') // 红胆输入框
        this.generateRemainBtn = doc.getElementById('generateRemain') // 生成剩余球按钮
        this.copyBtn = doc.getElementById('copy') // 复制按钮

        this.resultStr = '' // 生成结果的字符串

        this.gallopReds = [] // 红球胆拖
        this.gallopBlues = [] // 蓝球胆拖
        this.remainReds = [] // 剩余红球
        this.remainBlues = [] // 剩余蓝球

        this.gallopRedsDeal() // 计算红胆
        this.gallopBluesDeal() // 计算蓝胆
        this.remainRedsDeal() // 计算剩余红球
        this.remainBluesDeal() // 计算剩余蓝球

        this.redNumsEl.value = 7 // 设置红球数量默认值
        this.blueNumsEl.value = 2 // 设置蓝球数量默认值

        this.generateRemainReds() // 生成红球剩余球
        this.generateRemainBlues() // 生成蓝球剩余球

        // this.killRedsInputChange()
        // this.killBluesInputChange()

        this.restoreBtnClick() // 重置按钮绑定事件
        this.generateBtnClick() // 生成结果按钮绑定事件
        // this.generateKillRemainBtnClick()
        // this.generateChoseRemainBtnClick()

        this.gallopOnChange() // 绑定胆球输入框 change 事件
        this.copyBtnClick() // 复制按钮绑定事件
        this.generateRemainBtnClick() // 生成剩余球按钮点击事件

        this.remarkBox() // 随笔记录框打开事件

    }

    // 统一生成剩余球按钮点击事件
    generateRemainBtnClick() {

        this.generateRemainBtn.removeEventListener('click', this.generateRemainBtnDeal)
        this.generateRemainBtn.addEventListener('click', this.generateRemainBtnDeal)

    }
    // 统一生成剩余球按钮点击事件处理函数
    generateRemainBtnDeal = () => {

        this.remainRedsDeal()
        this.remainBluesDeal()

        this.generateRemainReds()
        this.generateRemainBlues()

    }

    // 备注框
    remarkBox = () => {

        let textArea = `<textarea class="remark-textarea" id="remarkTextarea" name="" id="" cols="50" rows="20" placeholder="这里可以填写一些提示信息供参考">${this.remarkValues}</textarea>`
        this.utils.dialog.open({
            container: {
                header: '随笔',
                content: textArea
            },
            overlay: false
        });

        let remarkBoxEl = this.doc.getElementById('remarkTextarea')
        remarkBoxEl.removeEventListener('change', this.remarkTextareaChange)
        remarkBoxEl.addEventListener('change', this.remarkTextareaChange)

    }
    // 备注框 change 事件
    remarkTextareaChange = (e) => {

        this.remarkValues = e.target.value

    }

    // 复制按钮绑定事件
    copyBtnClick() {

        this.copyBtn.removeEventListener('click', this.copyTxt)
        this.copyBtn.addEventListener('click', this.copyTxt)

    }

    // 复制函数
    copyTxt = () => {

        let text = this.resultStr

        if (!text) {
            this.btnAlert('提示', '请先生成结果再复制')
            return
        }

        if (typeof this.doc.execCommand !== "function") {
            this.btnAlert('复制失败，请手动复制', this.resultStr)
            return
        }

        var dom = this.doc.createElement("textarea")
        dom.value = text
        dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')
        this.doc.body.appendChild(dom)
        dom.select()
        var result = this.doc.execCommand('copy')
        this.doc.body.removeChild(dom)

        if (result) {
            this.noticeAlert('复制成功')
            return
        }

        if (typeof this.doc.createRange !== "function") {
            this.btnAlert('复制失败，请手动复制', this.resultStr)
            return
        }

        var range = this.doc.createRange()
        var div = this.doc.createElement('div')
        div.innerHTML = text
        div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')
        this.doc.body.appendChild(div)
        range.selectNode(div)
        const selection = window.getSelection()

        if (selection.rangeCount > 0) {
            selection.removeAllRanges()
        }

        selection.addRange(range)
        this.doc.execCommand('copy')
        this.noticeAlert('复制成功')
    }
    // 单独 消息 弹窗
    noticeAlert(msg) {

        // this.remarkValues = this.doc.getElementById('remarkTextarea').value
        this.utils.dialog.open({
            container: {
                content: msg,
            },
            autoClose: 1500,
            // callback:this.remarkBox
        })

    }
    // fail 弹窗
    btnAlert(msg, content) {

        // this.remarkValues = this.doc.getElementById('remarkTextarea').value
        this.utils.dialog.open({
            container: {
                header: msg,
                content: content
            },
            autoClose: 1500,
            // callback:this.remarkBox
        })

    }

    // 胆拖绑定事件
    gallopOnChange() {

        this.gallopRedsEl.removeEventListener('change', this.gallopOnChangeRedDeal)
        this.gallopRedsEl.addEventListener('change', this.gallopOnChangeRedDeal)
        this.gallopBluesEl.removeEventListener('change', this.gallopOnChangeBlueDeal)
        this.gallopBluesEl.addEventListener('change', this.gallopOnChangeBlueDeal)

    }
    // 胆拖事件处理函数
    gallopOnChangeRedDeal = () => {

        this.gallopRedsDeal()

        this.remainRedsDeal()

        this.generateRemainReds()

    }
    gallopOnChangeBlueDeal = () => {

        this.gallopBluesDeal()

        this.remainBluesDeal()

        this.generateRemainBlues()

    }

    // 红球胆拖计算
    gallopRedsDeal = () => {

        let tmpGallopReds = Array.from(new Set(this.gallopRedsEl.value.split(',').filter(Boolean).map(item => parseInt(item))))

        this.gallopRedsEl.value = tmpGallopReds.sort((a, b) => a - b)

        this.gallopReds = tmpGallopReds

    }
    // 蓝球胆拖计算
    gallopBluesDeal = () => {

        let tmpGallopBlues = Array.from(new Set(this.gallopBluesEl.value.split(',').filter(Boolean).map(item => parseInt(item))))

        this.gallopBluesEl.value = tmpGallopBlues.sort((a, b) => a - b)

        this.gallopBlues = tmpGallopBlues

    }

    // 剩余红球计算
    remainRedsDeal() {

        let tmpRemainReds = [] // 临时剩余球存储,最后统一赋值给剩余球全局成员

        let choseReds = Array.from(new Set(this.choseRedsEl.value.split(',').filter(Boolean).map(item => parseInt(item)))).filter(item => !this.gallopReds.includes(item)) // 获取手动选球的值

        this.choseRedsEl.value = choseReds.sort((a, b) => a - b)

        if (choseReds.length > 0) { // 如果有

            let choseRedsNum = Number(this.redNumsEl.value) - this.gallopReds.length

            if (choseReds.length < choseRedsNum) { // 数量不能少于 红球数量 - 胆拖数量
                this.noticeAlert('手动选球红球数量不能少于 ' + choseRedsNum + ' 个')
                return
            }

            tmpRemainReds = choseReds // 赋值

        } else { // 如果没有

            tmpRemainReds = JSON.parse(JSON.stringify(this.baseData.reds)) // 赋值所有球

        }

        let tmpKillReds = Array.from(new Set(this.killRedsEl.value.split(',').filter(Boolean).map(item => parseInt(item)))) // 获取所有杀球并过滤 ,,,, 或者空这种情况

        this.killRedsEl.value = tmpKillReds.sort((a, b) => a - b)

        if (tmpKillReds.length > 0) { // 如果有

            tmpKillReds.forEach(item => {
                let v = parseInt(item)
                if (v) tmpRemainReds.includes(v) && tmpRemainReds.splice(tmpRemainReds.indexOf(v), 1) // 杀掉所有杀球的值并直接修改剩余球的值
            });

        }

        let tmpGallopReds = JSON.parse(JSON.stringify(this.gallopReds)) // 获取胆拖

        if (tmpGallopReds.length > 0) {

            this.gallopReds.forEach(item => {
                let v = parseInt(item)
                if (v) tmpRemainReds.includes(v) && tmpRemainReds.splice(tmpRemainReds.indexOf(v), 1) // 杀掉所有胆拖的值并直接修改剩余球的值
            })

        }

        if (tmpRemainReds.length + tmpGallopReds.length < this.redNumsEl.value) { // 如果剩余红球的数量 加上 红胆的数量 小于 红球个数, 最后生成结果会导致程序死机,不能搞不能搞

            this.noticeAlert('剩余红球数量加上红胆数量小于红球要求的个数,不能生成结果')

            return

        }

        this.remainReds = tmpRemainReds.sort((a, b) => a - b) // 统一赋值给剩余球

    }
    // 剩余蓝球计算
    remainBluesDeal() {

        let tmpRemainBlues = [] // 临时剩余球存储,最后统一赋值给剩余球全局成员

        let choseBlues = Array.from(new Set(this.choseBluesEl.value.split(',').filter(Boolean).map(item => parseInt(item)))).filter(item => !this.gallopBlues.includes(item)) // 获取手动选球的值

        this.choseBluesEl.value = choseBlues.sort((a, b) => a - b)

        if (choseBlues.length > 0) { // 如果有

            let choseBluesNum = Number(this.blueNumsEl.value) - this.gallopBlues.length
            
            if (choseBlues.length < choseBluesNum) { // 数量不能少于 蓝球数量 - 蓝球胆拖数量
                this.noticeAlert('手动选球红球数量不能少于 ' + choseBluesNum + ' 个')
                return
            }

            tmpRemainBlues = choseBlues // 赋值

        } else { // 如果没有

            tmpRemainBlues = JSON.parse(JSON.stringify(this.baseData.blues)) // 赋值所有球

        }

        let tmpKillBlues = Array.from(new Set(this.killBluesEl.value.split(',').filter(Boolean).map(item => parseInt(item)))) // 获取所有杀球并过滤 ,,,, 或者空这种情况

        this.killBluesEl.value = tmpKillBlues.sort((a, b) => a - b)

        if (tmpKillBlues.length > 0) { // 如果有

            tmpKillBlues.forEach(item => {
                let v = parseInt(item)
                if (v) tmpRemainBlues.includes(v) && tmpRemainBlues.splice(tmpRemainBlues.indexOf(v), 1) // 杀掉所有杀球的值并直接修改剩余球的值
            });

        }
        let tmpGallopBlues = JSON.parse(JSON.stringify(this.gallopBlues)) // 获取胆拖

        if (tmpGallopBlues.length > 0) {

            tmpGallopBlues.forEach(item => {
                let v = parseInt(item)
                if (v) tmpRemainBlues.includes(v) && tmpRemainBlues.splice(tmpRemainBlues.indexOf(v), 1) // 杀掉所有胆拖的值并直接修改剩余球的值
            })

        }

        if (tmpRemainBlues.length + tmpGallopBlues.length < this.blueNumsEl.value) { // 如果剩余蓝球的数量 加上 蓝胆的数量 小于 蓝球个数, 最后生成结果会导致程序死机,不能搞不能搞

            this.noticeAlert('剩余蓝球数量加上蓝胆数量小于蓝球要求的个数,不能生成结果')

            return

        }

        this.remainBlues = tmpRemainBlues.sort((a, b) => a - b) // 统一赋值给剩余球

    }

    // 手动选球生成剩余球按钮事件
    generateChoseRemainBtnClick() {

        this.generateChoseRemainBtn.removeEventListener('click', this.generateChoseRemainResult)
        this.generateChoseRemainBtn.addEventListener('click', this.generateChoseRemainResult)

    }
    // 手动选球生成剩余球函数
    generateChoseRemainResult = () => {

        this.remainRedsDeal()
        this.remainBluesDeal()

        this.generateRemainReds()
        this.generateRemainBlues()
    }

    // 绑定生成结果按钮事件
    generateBtnClick() {

        this.generateBtn.removeEventListener('click', this.generateBtnClickDeal)
        this.generateBtn.addEventListener('click', this.generateBtnClickDeal)

    }
    // 生成结果处理函数
    generateBtnClickDeal = () => {

        /**
            - 获取对应的长度
            - 先生成对应的数量的球
            - 获取对应的球的 DOM , 临时存储一下
            - 获取胆拖先行放胆拖
            - 获取剩余红球
            - 生成一个 n 代表随机的次数
            - 随机 n 次不断生成一个红球, 不断修改对应 DOM 的值, n 次之后定下来这个红球, 放入结果数组, 再次随机获取下一个红球
            - 红球生成数量够了之后
            - 获取剩余蓝球
            - 生成一个 n 代表随机的次数
            - 随机 n 次不断生成一个蓝球, 不断修改对应 DOM 的值, n 次之后定下来这个蓝球, 放入结果数组, 再次随机获取下一个蓝球
            - 蓝球数量足够之后放入蓝球结果数组
            - 点击复制的时候复制的是这种结果的球
         */
        let redLen = parseInt(this.redNumsEl.value) // 红球长度
        let blueLen = parseInt(this.blueNumsEl.value) // 蓝球长度

        let resultStr = '' // 生成对应长度的球
        for (let i = 0; i < redLen; i++) {
            resultStr += `<span class="ball ball-r no-select" id="rBall_${i}">00</span>`
        }
        for (let i = 0; i < blueLen; i++) {
            resultStr += `<span class="ball ball-b no-select" id="bBall_${i}">00</span>`
        }

        this.resultBox.innerHTML = resultStr // 将对应的球放到 DOM 上


        /* 获取对应球的 DOM 后边用来操作 */
        let tmpRBallDoms = []
        let tmpBBallDoms = []
        for (let i = 0; i < redLen; i++) {
            tmpRBallDoms.push(this.doc.getElementById('rBall_' + i))
        }
        for (let i = 0; i < blueLen; i++) {
            tmpBBallDoms.push(this.doc.getElementById('bBall_' + i))
        }

        let result = { red: [], blue: [] } // 写一个结果对象,专门用来记录结果

        // 获取胆拖
        let gallopReds = Array.from(new Set(this.gallopRedsEl.value.split(',').filter(Boolean).map(item => parseInt(item))))
        let gallopBlues = Array.from(new Set(this.gallopBluesEl.value.split(',').filter(Boolean).map(item => parseInt(item))))
        let gallopRedsLen = gallopReds.length
        if (gallopRedsLen > 0) {
            result.red = result.red.concat(gallopReds)
            for (let i = 0; i < gallopRedsLen; i++) {
                tmpRBallDoms[i].innerHTML = this.zeroFilling(gallopReds[i])
            }
        }
        let gallopBluesLen = gallopBlues.length
        if (gallopBluesLen > 0) {
            result.blue = result.blue.concat(gallopBlues)
            for (let i = 0; i < gallopBluesLen; i++) {
                tmpBBallDoms[i].innerHTML = this.zeroFilling(gallopBlues[i])
            }
        }

        let reds = JSON.parse(JSON.stringify(this.remainReds)) // 获取剩余红球的数组
        let blues = JSON.parse(JSON.stringify(this.remainBlues)) // 获取剩余蓝球的数组

        let startRIndex = gallopRedsLen
        let startBIndex = gallopBluesLen

        this.generateOneRedResult(result, reds, blues, tmpRBallDoms, tmpBBallDoms, redLen, blueLen, startRIndex, startBIndex)

    }

    // 生成一个红球
    generateOneRedResult = (result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex) => {

        if (rStartIndex >= rMax) {

            this.generateOneBlueResult(result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex)
            return

        }

        let num = this.randNum(this.rateMin, this.rateMax) // 生成随机数,看最后生成的结果是什么
        let index = 0
        let Timer = null
        Timer = setInterval(() => {
            // 不断的生成一个数字并修改对应 DOM 的值

            let ind = this.randNum(0, remainReds.length - 1) // 生成一个随机的下标

            let redBall = remainReds[ind] // 拿到值

            rDoms[rStartIndex].innerHTML = this.zeroFilling(redBall)

            index++

            if (index >= num) { // 当 index 等于 num 之后,确定下来就是这个数,移除剩余数组内部的当前这个数字,继续下一个

                result.red[rStartIndex] = redBall
                remainReds.splice(remainReds.indexOf(redBall), 1)
                clearInterval(Timer)
                Timer = null
                this.generateOneRedResult(result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex + 1, bStartIndex)

            }

        }, 30)

    }
    // 生成一个蓝球
    generateOneBlueResult = (result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex) => {

        if (bStartIndex >= bMax) {

            this.resultSorts(result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex)
            return

        }

        let num = this.randNum(this.rateMin, this.rateMax) // 生成随机数,看最后生成的结果是什么
        let index = 0
        let Timer = null
        Timer = setInterval(() => {
            // 不断的生成一个数字并修改对应 DOM 的值

            let ind = this.randNum(0, remainBlues.length - 1) // 生成一个随机的下标

            let blueBall = remainBlues[ind] // 拿到值
            bDoms[bStartIndex].innerHTML = this.zeroFilling(blueBall)

            index++

            if (index >= num) { // 当 index 等于 num 之后,确定下来就是这个数,移除剩余数组内部的当前这个数字,继续下一个

                result.blue[bStartIndex] = blueBall
                remainBlues.splice(remainBlues.indexOf(blueBall), 1)
                clearInterval(Timer)
                Timer = null
                this.generateOneBlueResult(result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex + 1)

            }

        }, 30)

    }
    // 整理生成的结果
    resultSorts = (result, remainReds, remainBlues, rDoms, bDoms, rMax, bMax, rStartIndex, bStartIndex) => {

        result.red.sort((a, b) => a - b)
        result.blue.sort((a, b) => a - b)

        for (let i = 0; i < rMax; i++) {
            rDoms[i].innerHTML = this.zeroFilling(result.red[i])
        }
        for (let i = 0; i < bMax; i++) {
            bDoms[i].innerHTML = this.zeroFilling(result.blue[i])
        }

        this.btnAlert('提示', '生成结果成功, 已自动从小到大排序, 请关闭弹窗并点击"复制结果"按钮')

        this.resultStr = result.red.join(', ') + ' + ' + result.blue.join(', ')

    }


    // 生成结果
    generateResult = () => {

        let reds = JSON.parse(JSON.stringify(this.remainReds))
        let blues = JSON.parse(JSON.stringify(this.remainBlues))

        let redNum = parseInt(this.redNumsEl.value) - this.gallopReds.length
        let blueNum = parseInt(this.blueNumsEl.value) - this.gallopBlues.length

        let gallopReds = Array.from(new Set(this.gallopRedsEl.value.split(',').filter(Boolean).map(item => parseInt(item))))
        let gallopBlues = Array.from(new Set(this.gallopBluesEl.value.split(',').filter(Boolean).map(item => parseInt(item))))

        // 生成红球结果数组
        let redsResultsArr = this.generateTmpArr(reds, redNum, reds.length - 1)
        // 合并红球胆拖
        redsResultsArr = redsResultsArr.concat(this.gallopReds).sort((a, b) => a - b).map(item => this.zeroFilling(item))

        // 生成蓝球结果数组
        let bluesResultsArr = this.generateTmpArr(blues, blueNum, blues.length - 1)
        // 合并蓝球胆拖
        bluesResultsArr = bluesResultsArr.concat(this.gallopBlues).sort((a, b) => a - b).map(item => this.zeroFilling(item))

        // 组合生成结果展示
        let resultStr = ''

        redsResultsArr.forEach(item => {
            resultStr += `<span class="ball ball-r no-select">${item}</span>`
        })

        bluesResultsArr.forEach(item => {
            resultStr += `<span class="ball ball-b no-select">${item}</span>`
        })

        this.resultStr = redsResultsArr.join(', ') + ' + ' + bluesResultsArr.join(', ')

        this.resultBox.innerHTML = resultStr

    }

    // 生成随机的结果数组
    generateTmpArr(arr, len, max) {

        let tmpIndexs = []
        let tmpArr = []
        while (tmpIndexs.length < len) {
            let index = this.randNum(0, max);
            if (!tmpIndexs.includes(index)) {
                tmpIndexs.push(index)
                tmpArr.push(arr[index])
            }
        }

        return tmpArr.sort((a, b) => a - b)
    }

    // 绑定重置按钮事件
    restoreBtnClick() {

        this.restoreBtn.removeEventListener('click', this.restore)
        this.restoreBtn.addEventListener('click', this.restore)

    }
    // 重置
    restore = () => {

        this.killBluesEl.value = ''
        this.killRedsEl.value = ''
        this.redNumsEl.value = 7
        this.blueNumsEl.value = 2
        this.gallopRedsEl.value = ''
        this.gallopBluesEl.value = ''
        this.resultBox.innerHTML = `<span class="result-notice no-select">等待展示结果</span>`
        this.resultStr = ''
        this.init()

    }

    // 生成剩余红球
    generateRemainReds() {

        let htmlStr = ''

        let remainReds = JSON.parse(JSON.stringify(this.remainReds)).map(item => this.zeroFilling(item))

        remainReds.forEach((item, i) => {
            htmlStr += `<span class="ball ball-r no-select" id="r_${i}">${this.zeroFilling(item)}</span>`
        })

        this.remainRedBox.innerHTML = htmlStr

        this.remainRedClick()

    }

    // 生成剩余蓝球
    generateRemainBlues() {

        let htmlStr = '';

        let remainBlues = JSON.parse(JSON.stringify(this.remainBlues)).map(item => this.zeroFilling(item))

        remainBlues.forEach((item, i) => {
            htmlStr += `<span class="ball ball-b no-select" id="b_${i}">${this.zeroFilling(item)}</span>`
        })

        this.remainBlueBox.innerHTML = htmlStr

        this.remainBlueClick()

    }

    // 杀球按钮生成剩余球事件
    generateKillRemainBtnClick() {

        this.generateKillRemainBtn.removeEventListener('click', this.generateKillRemainBtnDeal)
        this.generateKillRemainBtn.addEventListener('click', this.generateKillRemainBtnDeal)

    }
    // 杀球按钮生成剩余球函数
    generateKillRemainBtnDeal = () => {

        this.remainRedsDeal('kill')

        this.remainBluesDeal('kill')

        this.generateRemainReds()

        this.generateRemainBlues()


    }

    // 剩余红球点击置灰并剩余红球数值移除事件
    remainRedClick() {

        this.remainRedBox.removeEventListener('click', this.redClick)
        this.remainRedBox.addEventListener('click', this.redClick)

    }
    redClick = (e) => {

        let elem = e.target

        if (elem.id.startsWith('r_')) {

            let remainReds = JSON.parse(JSON.stringify(this.remainReds))
            let num = parseInt(elem.innerHTML)

            if (this.ClassOperate.hasClassName(elem, 'gray')) {

                this.ClassOperate.removeClass(elem, 'gray')
                remainReds.push(num)

            } else {

                this.ClassOperate.addClass(elem, 'gray')
                remainReds.includes(num) && remainReds.splice(remainReds.indexOf(num), 1)

            }

            this.remainReds = remainReds

        }
    }

    // 剩余蓝球点击置灰并剩余红球数值移除事件
    remainBlueClick() {

        this.remainBlueBox.removeEventListener('click', this.blueClick)
        this.remainBlueBox.addEventListener('click', this.blueClick)

    }
    blueClick = (e) => {

        let elem = e.target

        if (elem.id.startsWith('b_')) {

            let remainBlues = JSON.parse(JSON.stringify(this.remainBlues))
            let num = parseInt(elem.innerHTML)

            if (this.ClassOperate.hasClassName(elem, 'gray')) {

                this.ClassOperate.removeClass(elem, 'gray')
                remainBlues.push(num)

            } else {

                this.ClassOperate.addClass(elem, 'gray')
                remainBlues.includes(num) && remainBlues.splice(remainBlues.indexOf(num), 1)

            }

            this.remainBlues = remainBlues

        }

    }

    // 补零
    zeroFilling(num) {
        let tmpNum = parseInt(num)
        if (tmpNum < 10)
            return '0' + tmpNum
        else
            return '' + tmpNum
    }

    // 生成随机数
    randNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }

}
export default Index